<template>
  <Card>
    <Row>
      <Form ref="form" :label-width="120" :model="form" :rules="ruleValidate" inline>
        <Form-item label="日期范围：" prop="date">
          <DatePicker
            v-model="form.date"
            placeholder="请选择日期范围"
            placement="bottom-start"
            style="width: 200px"
            type="daterange"
          >
          </DatePicker>
        </Form-item>
        <Form-item>
          <Button
            :loading="formLoading"
            icon="md-refresh"
            style="margin-left: -70px"
            type="primary"
            @click="handleForm"
          >
            刷新里程
          </Button>
        </Form-item>
      </Form>
    </Row>
    <Divider/>
    <Form ref="searchForm" :label-width="120" :model="searchForm" inline>
      <Form-item label="操作时间范围：" prop="date">
        <DatePicker
          v-model="searchForm.date"
          placeholder="请选择日期范围"
          placement="bottom-start"
          style="width: 200px"
          type="daterange"></DatePicker>
      </Form-item>
      <Form-item label="操作人：" prop="operator">
        <Input v-model="searchForm.operator" clearable placeholder="支持模糊搜索" style="width: 200px" type="text"/>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
        <Button @click="handleReset">重置</Button>
      </Form-item>
    </Form>
    <Table
      :columns="column"
      :data="data"
      :loading="loading"
      border
      size="small"
      stripe></Table>
    <Row class="page" justify="end" type="flex">
      <Page
        :current="searchForm.pageNumber"
        :page-size="searchForm.pageSize"
        :total="total"
        show-total
        @on-change="changePage"/>
    </Row>
  </Card>
</template>
<script>
import {mileageLogList, mileageRefresh} from '../../api/mileage'

export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value[0] == '' && value[1] == '') {
        callback(new Error('请选择日期范围'))
      }
      callback()
    }
    return {
      form: {
        date: [null, null],
      },
      ruleValidate: {
        date: [{required: true, validator: validatePass, trigger: 'change'}],
      },
      formLoading: false,
      searchForm: {
        operator: '',
        date: [null, null],
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      loading: false,
      data: [],
      total: 0,
      column: [
        {type: 'index', width: 60, align: 'center'},
        {
          title: '操作人',
          key: 'operator',
          align: 'center',
          minWidth: 150,
        },
        {
          title: '操作时间',
          key: 'created_at',
          align: 'center',
          minWidth: 150,
        },
        {
          title: '时间范围',
          key: 'date',
          align: 'center',
          minWidth: 350,
          render: (h, params) => {
            return h('span', [params.row.startDay + ' 至 ' + params.row.lastDay])
          },
        },
        {title: '操作结果', key: 'status', align: 'center', minWidth: 150},
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchForm.pageNumber = v
      this.getMileageLogList()
    },
    getMileageLogList() {
      this.loading = true
      mileageLogList(this.searchForm).then((res) => {
        this.loading = false
        if (res.data) {
          this.data = res.data.result
          this.total = res.data.count
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getMileageLogList()
    },
    handleSearch() {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      this.getMileageLogList()
    },
    init() {
      this.getMileageLogList()
    },
    handleForm() {
      const _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: '确认刷新里程数据',
            width: 470,
            content: '您确认要刷新里程数据吗？此操作不可逆，请谨慎操作！',
            onOk: () => {
              this.formLoading = true
              mileageRefresh(this.form).then((res) => {
                this.formLoading = false
                // console.log(res);
                if (res.data.status == '成功') {
                  // console.log(_this);
                  _this.$refs.form.resetFields()
                  _this.getMileageLogList()
                  this.$Message.success(res.message)
                } else {
                  this.$Message.error(res.message)
                }
              })
            },
          })
        }
      })
    },
  },
}
</script>
